<template>
  <div class="wrapper">
    <scroller class="main-list">
      <div @click="toRecommendDetail(item.recommendShareUrl)" class="list" v-for="(item ,index) in recommendList ">
        <image class="image" resize="cover" :src="item.recommendPagePic2"></image>
        <text class="title">{{item.title}}</text>
        <text class="subTitle">{{item.subTitle}}</text>
      </div>
    </scroller>
  </div>
</template>

<script>
  const navigator = weex.requireModule('navigator');
  import Utils from '@/assets/js/util'
  import {GETRECOMENDLIST} from '@/const/shareUri';
  import ajax from '@/assets/js/ajax'
  export default {
    name: "zetianshuo",
    data() {
      return {
        recommendList: [],
      }
    },
    created() {
      //this.initData();
      this.initData();
    },
    methods: {

      initData() {
        ajax.get(GETRECOMENDLIST, {}, res => {
          console.log(res.data);
          this.recommendList = res.data;
        });
      },
      toRecommendDetail(url){
        navigator.push({
          url:Utils.setBundleUrl('webview/webview.js?weburl='+url),
          animated:'true'
        });
      }
    }
  }
</script>

<style scoped>
  .main-list {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin-top: 167px;*/
    /*margin-bottom: 90px;*/
  }

  .list {
    padding: 28px;
    border-bottom-color: #d5d4d4;
    border-bottom-style: solid;
    border-bottom-width:1px;
  }
  .main-list .list:last-child{
    border:none;
  }

  .image {
    width: 694px;
    height: 392px;
    border-radius: 10px;
  }
  .title{
    font-size: 30px;
    margin-top: 26px;
    margin-bottom: 10px;
    color: #323232;
    font-weight: 500;
  }
  .subTitle{
    font-size:25px;
    color:#454545;
  }

</style>